<template>
	<view class="content-box">
		<!-- 头部navbar -->
		<navbar :fixed="true" :bgColor="'#fff'" :title="t('invitation.yqjl')" :leftIcon="true"></navbar>

		<!-- 收益统计区域 -->
		<view class="stats-section">
			<view class="bg-image-container">
				<image class="bg-image" src="/static/icon/bg3.svg" mode="aspectFit"></image>
			</view>
			<view class="stats-content">
				<view class="stats-item">
					<text class="stats-label">{{ t('invitation.jtsy') }}{{ profitSummary.todayAmount.toFixed(2) }}</text>
					<text class="currency">USDT</text>
				</view>
				<view class="stats-item">
					<text class="stats-label">{{ t('invitation.zsy') }}{{ profitSummary.totalAmount.toFixed(2) }}</text>
					<text class="currency">USDT</text>
				</view>
			</view>
		</view>

		<!-- 筛选按钮 -->
		<view class="filter-section">
			<view class="border-box">
				<view class="filter-btn" :class="{active:currentFilter=='success'}" @click="setFilter('success')">
					<text>{{ t('invitation.cgyz') }}</text>
				</view>
				<view class="filter-btn" :class="{active:currentFilter=='pending'}" @click="setFilter('pending')">
					<text>{{ t('invitation.wcz') }}</text>
				</view>
			</view>
		</view>

		<!-- 邀请记录列表 -->
		<view class="records-list">
			<view class="record-item" v-for="(item, index) in recordsList" :key="item.id || index">
				<view class="list-left">
					<image class="" :src="item.avatar || '/static/image/home/invite/avatar.svg'" mode="aspectFill"></image>
					<text class="record-info">{{ item.invitorName || item.email }}</text>
				</view>
				<view class="list-right">
					<view class="reward-btn" v-if="currentFilter=='success'">
						{{ t('invitation.sy') }}+{{ item.amount ? item.amount.toFixed(2) : '0.00' }}
					</view>
					<view class="reward-btn" v-else>
						{{ t('invitation.czwzc') }}
					</view>
					<view class="date">{{ formatTime(item.payTime || item.createTime) }}</view>
				</view>
			</view>
			
			<!-- 加载状态 -->
			<view class="loading-more" v-if="loading">
				<text>加载中...</text>
			</view>
			
			<!-- 没有更多数据 -->
			<view class="no-more" v-if="!hasMore && recordsList.length > 0">
				<text>没有更多数据了</text>
			</view>
			
			<!-- 空状态 -->
			<view class="empty-state" v-if="!loading && recordsList.length === 0">
				<text>暂无邀请记录</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		useI18n
	} from 'vue-i18n';
	import {
		ref,
		computed,
		onMounted
	} from 'vue';
	import { inviteApi } from '@/utils/api.js';
	
	const {
		t,
		locale
	} = useI18n();

	// 当前筛选状态
	const currentFilter = ref('success');
	
	// 收益统计数据
	const profitSummary = ref({
		todayAmount: 0.00,
		totalAmount: 0.00
	});
	
	// 邀请记录列表
	const recordsList = ref([]);
	
	// 分页参数
	const pageParams = ref({
		pageNo: 1,
		pageSize: 10,
		status: true // true-已充值，false-未充值
	});
	
	// 加载状态
	const loading = ref(false);
	const hasMore = ref(true);
	const total = ref(0);

	// 获取邀请收益统计
	const getProfitSummary = async () => {
		try {
			const response = await inviteApi.getProfitSummary();
			if (response.code === 0) {
				profitSummary.value = response.data;
			}
		} catch (error) {
			console.error('获取邀请收益统计失败:', error);
			uni.showToast({
				title: '获取收益统计失败',
				icon: 'none'
			});
		}
	};

	// 获取邀请记录列表
	const getProfitPage = async (reset = false) => {
		if (loading.value) return;
		
		try {
			loading.value = true;
			
			if (reset) {
				pageParams.value.pageNo = 1;
				recordsList.value = [];
				hasMore.value = true;
			}
			
			const response = await inviteApi.getProfitPage(pageParams.value);
			if (response.code === 0) {
				const { list, total: totalCount } = response.data;
				
				if (reset) {
					recordsList.value = list;
				} else {
					recordsList.value.push(...list);
				}
				
				total.value = totalCount;
				hasMore.value = list.length === pageParams.value.pageSize;
				
				if (!reset) {
					pageParams.value.pageNo++;
				}
			}
		} catch (error) {
			console.error('获取邀请记录失败:', error);
			uni.showToast({
				title: '获取邀请记录失败',
				icon: 'none'
			});
		} finally {
			loading.value = false;
		}
	};

	// 设置筛选条件
	const setFilter = (filter) => {
		currentFilter.value = filter;
		pageParams.value.status = filter === 'success';
		getProfitPage(true); // 重置并重新加载数据
	};

	// 格式化时间
	const formatTime = (timestamp) => {
		if (!timestamp) return '';
		const date = new Date(timestamp);
		return date.toLocaleString('zh-CN', {
			year: 'numeric',
			month: '2-digit',
			day: '2-digit',
			hour: '2-digit',
			minute: '2-digit',
			second: '2-digit'
		}).replace(/\//g, '.');
	};

	// 页面加载时获取数据
	onMounted(() => {
		getProfitSummary();
		getProfitPage(true);
	});
</script>

<style scoped lang="scss">
	.content-box {
		min-height: 100vh;
		background-color: #F5F6FA;
		padding-bottom: 100rpx;
		box-sizing: border-box;
		padding: 48.85rpx 52.33rpx;
	}

	.stats-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0 31.4rpx;

		.bg-image-container {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 52.33rpx;

			.bg-image {
				width: 409.91rpx;
				height: 421.29rpx;
			}
		}

		.stats-content {
			display: flex;
			width: 100%;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 41.86rpx;

			.stats-item {
				display: flex;
				// flex-direction: column;
				align-items: center;

				.stats-label {
					font-size: 31.4rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 1);
					margin-bottom: 10rpx;
					letter-spacing: 0px;
					line-height: 45.45rpx;
					margin-right: 10rpx;
				}

				.stats-value {
					font-size: 20.93rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 1);
				}

				.currency {
					font-size: 20.93rpx;
					font-weight: 400;
					color: #666666;
				}
			}
		}
	}


	.filter-section {
		display: flex;
		// margin: 0 61rpx 61.05rpx 61.05rpx;
		margin: 0 13.96rpx;
		box-sizing: border-box;
		// clip-path: inset(0 round 27.91rpx);
		background: linear-gradient(90deg, rgba(14, 194, 157, 1) 0%, rgba(88, 218, 221, 1) 35.42%, rgba(25, 162, 203, 1) 68.75%, rgba(2, 124, 217, 1) 100%);
		border-radius: 27.91rpx;
		padding: 2rpx;

		.border-box {
			width: 100%;
			display: flex;
			align-items: center;
			border-radius: 27.91rpx;
			background-color: #Fff;
			padding: 13.95rpx 17.44rpx;
		}
	}

	.filter-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		padding: 17.44rpx 0;
		text-align: center;
		// border-radius: 40rpx;
		// transition: all 0.3s;

		text {
			font-size: 27.91rpx;
			color: rgba(102, 102, 102, 1);
			font-weight: 400;
			line-height: 40.42rpx;
		}

		&.active {
			border-radius: 17.44rpx;
			// margin:  0;
			background: linear-gradient(90deg, rgba(12, 193, 155, 1) 0%, rgba(91, 220, 222, 1) 34.03%, rgba(5, 145, 198, 1) 65.97%, rgba(2, 120, 220, 1) 100%);
			border: 1.74rpx solid rgba(48, 129, 236, 1);

			text {
				font-size: 27.91rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 40.42rpx;
				color: rgba(255, 255, 255, 1);
				text-align: left;
				vertical-align: top;
			}
		}
	}

	.records-list {
		margin-top: 34.89rpx;

		.record-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1.74rpx solid rgba(74, 73, 73, 0.2);
			padding-bottom: 10.67rpx;
			padding-top: 27.91rpx;

			// &:last-child {
			// 	border-bottom: none;
			// }

			.list-left {
				display: flex;
				padding-left: 5.23rpx;

				image {
					width: 99.42rpx;
					height: 99.42rpx;
					border-radius: 50%;
				}
			}
		}
	}





	.record-info {
		font-size: 27.91rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		line-height: 40.42rpx;
		color: rgba(51, 51, 51, 1);
		margin-left: 34.89rpx;
		padding-top: 8.72rpx;
	}


	.list-right {}

	.reward-btn {
		width: 207.57rpx;
		height: 57.56rpx;
		opacity: 1;
		border-radius: 13.95rpx;
		background: rgba(48, 129, 236, 0.2);
		border: 1.74rpx solid rgba(48, 129, 236, 1);
		font-size: 27.91rpx;
		font-weight: 300;
		letter-spacing: 0rpx;
		line-height: 57.56rpx;
		color: rgba(0, 0, 0, 1);
		text-align: center;
	}

	.date {
		margin-top: 10.47rpx;
		font-size: 24rpx;
		color: #999999;
	}

	.loading-more,
	.no-more,
	.empty-state {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 40rpx 0;
		
		text {
			font-size: 28rpx;
			color: #999999;
		}
	}

	.empty-state {
		padding: 100rpx 0;
		
		text {
			font-size: 32rpx;
			color: #cccccc;
		}
	}
</style>